<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import consts from '@/consts.ts';
import { qualificationGet, storeShopsGet } from '@/services/goods.ts';
import type { GoodsList, GoodsQualificationList } from '@/types';

const $route = useRoute();
const $router = useRouter();
const loading = ref(false);
const finished = ref(false);
const storeForm = reactive({
  supplierId: $route.query.supplierId,
  page: 1,
  limit: 10,
});
const storeData: {
  supplierName?: string;
  goodsList: GoodsList[];
} = reactive({
  supplierName: '',
  goodsList: [],
});

// 资质
const actionShow = ref(false);
const qualificationData = ref<GoodsQualificationList[]>([]);
const imagePreview = ref(false);
const imageList = ref<string[]>([]);
const onLookClick = async () => {
  actionShow.value = true;
  const { err, data } = await qualificationGet($route.query.supplierId);
  if (err) {
    showToast(err);
    return;
  }
  qualificationData.value = data.supplierQualificationList;
};

const onSearchClick = () => {
  $router.push({ path: '/search' });
};
const copyToClipboard = (value: any) => {
  try {
    // 尝试复制选中的文本
    let oInput = document.createElement('input'); // 创建输入框元素
    oInput.value = value; // 将想要复制的值赋值给输入框
    document.body.appendChild(oInput); // 在页面上追加输入框
    oInput.select(); // 选中输入框
    document.execCommand('Copy'); // 执行浏览器复制命令
    oInput.remove(); // 移除输入框
    showToast('复制成功');
  } catch (err) {
    console.log(err);
    showToast('不能使用这种方法复制');
  }
};

const onPreviewClick = (card: string) => {
  imageList.value = [card];
  imagePreview.value = true;
};
const carPop = ref(false);
const joinCarData = ref({});
const onJoinCarClick = (props: GoodsList) => {
  carPop.value = true;
  joinCarData.value = props;
};

const loadData = async () => {
  try {
    loading.value = true;
    const { err, data } = await storeShopsGet({
      supplierId: storeForm.supplierId,
      page: storeForm.page,
      limit: storeForm.limit,
    });
    loading.value = false;
    if (err) {
      showToast(err);
      return;
    }
    storeData.supplierName = data.supplierName;
    storeData.goodsList = [...storeData.goodsList, ...data.goodsList];

    // 终止条件 只要返回的数据小于每页显示的条数，就说明没有数据了
    if (data.goodsList.length < storeForm.limit) {
      finished.value = true;
    } else {
      storeForm.page++;
    }
  } catch (error: any) {
    showToast(error);
  } finally {
    loading.value = false;
  }
};
const onImageClick = (item: GoodsList) => {
  $router.push({
    path: `/goodsDetails/${item.goodsId}`,
  });
};
onMounted(() => {
  loadData();
});
</script>

<template>
  <div class="store_container">
    <div class="home_search">
      <div class="search_box" @click="onSearchClick">
        <svg-icon icon-class="searchicon" size="1em" />
        <span class="search-text">搜索</span>
      </div>
    </div>
    <div class="top">
      <div class="top-left">
        <svg-icon icon-class="shop" size="1.3em" />
        <div class="shop_name">{{ storeData.supplierName }}</div>
      </div>
      <van-button @click="onLookClick">查看资质</van-button>
    </div>
    <div class="list-content">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        error-text="请求失败，点击重新加载"
        @load="loadData"
      >
        <div class="sell_shop">
          <div v-for="item in storeData.goodsList" :key="item.goodsId" class="shopBox">
            <van-image @click="onImageClick(item)" :src="item.goodsImg?.split(',')[0]" />
            <div class="goods_name">
              <van-text-ellipsis
                rows="2"
                :content="`${item.goodsName}  ${item.goodsExpandparamValueList[0]?.expandparamValueName || ''}`"
              />
            </div>
            <div class="goods_price">
              <div>
                ￥
                <span class="price_num">{{ item.goodsSalesPrice }}</span>
              </div>
              <svg-icon @click="onJoinCarClick(item)" icon-class="car" size="1.9em" />
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
  <JoinCar v-model="carPop" :joinCarData="joinCarData"></JoinCar>
  <van-action-sheet :round="false" v-model:show="actionShow">
    <van-tabs animated :ellipsis="false">
      <van-tab
        v-for="card in qualificationData"
        :key="card.supplierQualificationId"
        :title="
          consts.SupplierQualificationType.find(
            (e) => e.qualificationType === card.qualificationType,
          )?.title
        "
      >
        <div class="action_box">
          <van-image
            @click="onPreviewClick(card.qualificationImg)"
            fit="fill"
            :src="card.qualificationImg"
          />
        </div>
        <div class="car_num">
          <div v-if="card.qualificationCode">证件编号1：</div>
          <div class="num_text" v-if="card.qualificationCode">
            <span class="text-num">{{ card.qualificationCode }}</span>
            <svg-icon
              @click="copyToClipboard(card.qualificationCode)"
              icon-class="copy"
              size="1em"
            />
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </van-action-sheet>
  <van-image-preview v-model:show="imagePreview" :images="imageList"></van-image-preview>
</template>

<style scoped lang="scss">
.action_box {
  width: 100%;
  height: 272px;
  margin: 4px 0 10px 0;
  border-bottom: 1px solid #0000001a;
  border-top: 1px solid #0000001a;
  display: flex;
  justify-content: center;
  align-items: center;

  .van-image {
    width: 170px;
    height: 240px;
  }
}

.car_num {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .num_text {
    height: 100%;
    display: flex;
    align-items: center;
    color: #00000080;
    font-size: 14px;
    font-weight: 400;

    .text-num {
      margin-right: 8px;
    }
  }
}

:deep(.van-tabs__line) {
  background: #e89000;
}

:deep(.van-tab--active) {
  color: #00ba9f;
}

.store_container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f6f6f6;

  .home_search {
    width: 100%;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #f6f6f6;
    background: white;

    .search_box {
      width: 100%;
      height: 32px;
      padding: 0 8px;
      border-radius: 100px;
      display: flex;
      align-items: center;
      background: #f6f6f6;

      .search-text {
        font-size: 15px;
        font-weight: 400;
        margin-left: 6px;
        color: #787878;
      }
    }

    .van-search {
      width: 100%;
      height: 100%;
    }
  }

  .top {
    width: 100%;
    height: 48px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;

    .top-left {
      height: 100%;
      display: flex;
      align-items: center;

      .shop_name {
        font-size: 14px;
        font-weight: 500;
        margin-left: 8px;
        color: #000;
      }
    }

    .van-button {
      width: 86px;
      height: 24px;
      font-size: 13px;
      font-weight: 400;
      color: #e89000;
      border: 1px solid #e89000;
      border-radius: 12px;
    }
  }

  .list-content {
    height: calc(100vh - 97px);
    :deep(.van-list__finished-text) {
      background: #f6f6f6;
    }
  }

  .sell_shop {
    width: 100%;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;

    &:after {
      content: '';
      width: 181px;
      height: 0;
      display: block;
    }

    .shopBox {
      width: 181px;
      height: 255px;
      margin-top: 4px;
      border-radius: 8px;
      background: #fff;

      .van-image {
        width: 100%;
        height: 181px;
      }

      :deep(.van-image__img, .van-image__error, .van-image__loading) {
        border-radius: 8px 8px 0 0;
      }

      .goods_name {
        width: 100%;
        height: 36px;
        padding: 0 8px;
        font-size: 12px;
        font-weight: 500;
        color: #000;
      }

      .goods_price {
        font-size: 10px;
        width: 100%;
        height: 22px;
        padding: 0 8px;
        margin-top: 4px;
        color: #e86600;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price_num {
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
